<template>
    <div class="box">
        <!-- 用户添加 -->
        <div class="formBox">
            <h2>添加用户</h2>
            <el-form :label-position="pos" label-width="80px" ref="formName" :model="user">
                <h3>基本信息</h3>
                <div>
                    <el-form-item label="用户名" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-input v-model="user.name" size="small"></el-input>
                        <span>电话</span>
                        <el-input v-model="user.phone" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-input v-model="user.password" size="small"></el-input>
                        <span>性别</span>
                        <el-select v-model="user.sex" placeholder="请选择性别" size="small">
                            <el-option
                                v-for="item in userSex"
                                :key="item.sex"
                                :value="item.sex"
                                :label="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-upload
                            class="upload-demo"
                            :multiple='false'
                            :headers="token"
                            ref="upload"
                            :limit="1"
                            name="user"
                            :on-success="onSuccess"
                            action="http://www.shuiyue.info:21000/file/upload/user"
                            drag>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </div>
                <h3>详细信息</h3>
                <div>
                    <el-form-item label="城市" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-input v-model="user.address" size="small"></el-input>
                        <span>生日</span>
                        <el-date-picker
                            v-model="user.birthday"
                            type="date"
                            size="small"
                            placeholder="生日"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="入职日期" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-date-picker
                            v-model="user.induction"
                            type="date"
                            size="small"
                            placeholder="入职日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <span>部门</span>
                        <el-select v-model="user.dept" placeholder="请选择部门" size="small">
                            <el-option
                                v-for="(item, index) in b"
                                :key="index"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <el-select v-model="user.position" placeholder="请选择对应职位权限" size="small">
                            <el-option
                                v-for="(item, index) in a"
                                :key="index"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                        <span>邮箱</span>
                        <el-input v-model="user.email" size="small"></el-input>
                </el-form-item>
                </div>
                <div>
                    <el-form-item label="备注" :rules="[
                        { required: true, message: '必传'},
                    ]">
                        <textarea v-model="user.remark"></textarea>
                        <div class="bottom">
                            <el-button @click="addEvt('formName')" size="small" type="primary" class="add">提交</el-button>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!-- 用户密码修改 -->
        <!-- <div class="pwd" v-show="updatepwd">
             <el-form :label-position="pos" label-width="80px" :model="user">
                <el-form-item label="旧密码">
                    <el-input v-model="oldPassword" size="small"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="newPassword" size="small"></el-input>
                    <div class="updatBtn">
                        <el-button @click="updatePwd" size="small" type="primary" >确定</el-button>
                        <el-button @click="back" size="small" type="primary" >返回</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div> -->
        <!-- 用户信息修改 -->
        <!-- <div class="upd" v-show="updateUser">
             <el-form :label-position="pos" label-width="80px" :model="user">
                <el-form-item label="用户id">
                    <el-input v-model="uid" placeholder="请输入要修改的用户id" size="small"></el-input>
                    <el-button @click="updUser" size="small" type="primary" >确定</el-button>
                    <el-button @click="backUser" size="small" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
            <div v-show="showUser" class="updUserBox">
                 <el-form :label-position="pos" label-width="80px" :model="user">
                <el-form-item label="用户名">
                    <el-input v-model="user.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="upload-demo"
                        :multiple='false'
                        :headers="token"
                        ref="upload"
                        :limit="1"
                        :on-success="onSuccess"
                        action="http://www.shuiyue.info:21000/file/upload/user"
                        drag>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="城市">
                    <el-input v-model="user.address" size="small"></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <div class="block">
                            <el-date-picker
                            v-model="user.birthday"
                            type="date"
                            size="small"
                            placeholder="生日">
                            </el-date-picker>
                        </div>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="user.sex" placeholder="请选择性别-1 女 2 男" size="small">
                        <el-option
                            v-for="item in userSex"
                            :key="item.sex"
                            :value="item.sex">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职日期">
                    <div class="block">
                            <el-date-picker
                            v-model="user.induction"
                            type="date"
                            size="small"
                            placeholder="入职日期">
                            </el-date-picker>
                        </div>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select v-model="user.position" placeholder="请选择职位" size="small">
                        <el-option
                            v-for="(item, index) in a"
                            :key="index"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="user.phone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="user.email" size="small"></el-input>
                </el-form-item>
                <el-form-item label="用户权限">
                    <el-select v-model="user.role" placeholder="请选择对应职位权限" size="small">
                        <el-option
                            v-for="(item, index) in a"
                            :key="index"
                            :label="item.id"
                            :value="item.id">
                            {{item.name}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <textarea v-model="user.remark"></textarea>
                    <div>
                        <el-button @click="Preservation" size="small" type="primary" class="updbtn">保存</el-button>
                    </div>
                </el-form-item>
            </el-form>
            </div>
        </div> -->
        <!-- 删除用户  -->
        <!-- <div class="del" v-show="del">
            <el-form :label-position="pos" label-width="80px" :model="user">
                <el-form-item label="用户id">
                    <el-input v-model="uid" placeholder="请输入要修改的用户id" size="small"></el-input>
                    <el-button @click="deleteEvt" size="small" type="primary" >确定</el-button>
                    <el-button @click="delback" size="small" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
        </div> -->
    </div>
</template>

<script>
import{userAddApi,userDeleteApi,userUpdateApi,userUpdatePwdApi,roleListApi} from '../../../apis/homeApi'
import{getUserInfoApi} from '../../../apis/loginApi'
import { orgListApi } from '../../../apis/userApi'
    export default {
        data() {
            return {
                b:[],
                a:[],
                uid:"",
                show:true,
                updatepwd:false,
                updateUser:false,
                showUser:false,
                del:false,
                pos:"right",
                oldPassword: "",
                newPassword: "",
                user: {
                    id: "",
                    state: "1",
                    name: "",
                    password: "",
                    photo: "",
                    sex:"",
                    address: "",
                    birthday: "",
                    induction: "",
                    dept: "",
                    position: "",
                    phone: "",
                    email: "",
                    role: "",
                    remark: "",
                },
                
                userSex: [{
                    sex:1,
                    value:'女'
                    }, {
                    sex:2,
                    value:'男'
                    }],
                userList:[],
            }
        },
        computed:{
            token(){
                return {'X-Token':this.$store.getters['common/token']}
            }
        },
        created(){
            // this.$nextTick()
            this.getRole()
            this.getzhiwei()
        },
        methods: {
            onSuccess:function(res){
                console.log(res);
                if(res.code === 200){
                    this.user.photo = res.data[0].path;
                    console.log(this.user.photo);
                }else{
                    this.$message.error('头像上传失败，请重新上传')
                }
            },
            //获取用户权限信息
            getRole(){
                roleListApi().then(d=>{
                    if(d.code === 200){
                        this.a = d.data
                    }
                })
            },
            //获取职位
            getzhiwei(){
              orgListApi().then(res => {
                  console.log(res);
                  this.b = res.data.rows
                  console.log(this.b);
              })  
            },
            //添加信息
            addEvt(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.a.forEach(it => {
                        if(it.name === this.user.position){
                            this.user.role = it.id
                        }
                    })
                    this.user.sex += ""
                    this.user.id = this.user.name
                    console.log(this.user);
                    userAddApi(this.user).then(d=>{
                            if(d.code==200){
                                this.$message.success('用户添加成功')
                                this.user = {
                                    id: "",
                                    state: "1",
                                    name: "",
                                    password: "",
                                    photo: "",
                                    sex:"",
                                    address: "",
                                    birthday: "",
                                    induction: "",
                                    dept: "",
                                    position: "",
                                    phone: "",
                                    email: "",
                                    role: "",
                                    remark: "",
                                }
                                return
                            }else{
                                this.$message.error(d.message)
                            }
                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },


            updateEvt(){
              this.show=false
              this.updateUser=true
            },
            //用户信息查询
            async updUser(){
                 await getUserInfoApi({id:this.uid}).then(d=>{
                  if(d.code==200){
                      let userInfo=d.data
                      this.userList.push(userInfo)
                      this.showUser=true
                      console.log(this.userList);
                      this.userList.forEach(it=>{
                            this.user.id=it.id
                            this.user.state=it.state
                            this.user.name=it.name
                            this.user.photo=it.photo
                            this.user.sex=it.sex
                            this.user.address=it.address
                            this.user.birthday=it.birthday
                            this.user.induction=it.induction
                            this.user.dept=it.dept
                            this.user.position=it.position
                            this.user.phone=it.phone
                            this.user.email=it.email
                            this.user.role=it.role
                            this.user.remark=it.remark
                      })
                      this.uid=""
                  }
              })
              
            },
            //用户信息修改
            async Preservation(){
               await userUpdateApi({
                    id:this.user.name,
                    state:this.user.state,
                    name:this.user.name,
                    password:this.user.password,
                    photo:this.user.photo,
                    sex:this.user.sex,
                    address:this.user.address,
                    birthday:this.user.birthday,
                    induction:this.user.induction,
                    dept:this.user.dept,
                    position:this.user.position,
                    phone:this.user.phone,
                    email:this.user.email,
                    role:this.user.role,
                    remark:this.user.remark,
              }).then(d=>{
                    if(d.code==200){
                        this.$message('用户信息修改成功')  
                        this.user.name=""
                        this.user.photo=""
                        this.user.sex=""
                        this.user.address=""
                        this.user.birthday=""
                        this.user.induction=""
                        this.user.position=""
                        this.user.phone=""
                        this.user.email=""
                        this.user.role=""
                        this.user.remark=""             
                        this.show=true
                        this.updateUser=false
                    }
                }).catch(e=>{
                    this.$message(e)
                })
            },
            //用户信息删除
            async delEvt(){
                this.del=true
                this.show=false
            },
            async deleteEvt(){
                 await userDeleteApi({id:this.uid}).then(d=>{
                    if(d.code==200){
                        this.$message('用户删除成功')
                        this.del=false
                        this.show=true
                        this.uid=""
                        return
                    }
                }).catch(e=>{
                    this.$message(e)
                })
            },
            delback(){
                this.del=false
                this.show=true
            },
            pwdEvt(){
                this.show=false
                this.updatepwd=true
            },
            //用户密码修改
            updatePwd(){
                 userUpdatePwdApi({
                   oldPassword:this.oldPassword,
                   newPassword:this.newPassword  
                }).then(d=>{
                    if(d.code==200){
                        this.$message('用户密码改成功')
                        this.show=true
                        this.updatepwd=false
                    }
                }).catch(e=>{
                    this.$message(e)
                })
            },    
            back(){
              this.show=true
              this.updatepwd=false
            },
            backUser(){
              this.show=true
              this.updateUser=false
            }
        }
    }
</script>

<style lang="less" scoped>
    .box{
        width:calc(100% - 48px);
        height:calc(100% - 48px);
        padding: 8px 16px;
        display: block;
        overflow-x: hidden;
        background-color:#fff;
        >.formBox{
            >.el-form{
                padding-bottom: 50px;
                .el-form-item {
                    .el-input{
                        width:400px;
                    }
                    span{
                        margin:0px 13px 0px 13px;
                        color:#8c8c8c;
                    }
                    .add{
                        margin-left:50px;
                    }
                }
            }
        }
        .pwd{
           >.el-form{
               margin-left: 25%;
               margin-top: 10%;
                .el-form-item {
                    .el-input{
                        width:400px;
                    }
                }
            }
            .updatBtn{
                margin-top: 40px;
                margin-left: 20%;
            }
        }
        .upd{
            >.el-form{
                padding-bottom: 50px;
                .el-form-item {
                    .el-input{
                        width:400px;
                        margin-right: 10px
                    }
                }
            }
            >.updUserBox{
                 >.el-form{
                padding-bottom: 50px;
                .el-form-item {
                    .el-input{
                        width:400px;
                    }
                }
                .updbtn{
                    margin-left: 50px;
                }
            }
            }
        }
        .del{
           >.el-form{
                .el-form-item {
                    .el-input{
                        width:400px;
                        margin-right: 10px
                    }    
                }
            }
        }
        .el-select{
            width:400px;
        }
        textarea{
            width:390px;
            color:#606266;
            outline-color:#409EFF;
            border: 1px solid #d9d9d9; 
                }
    }
</style>